<template>
  <div class="send-email">
    <div class="left">
      <div class="left-list">
        <div
          v-for="(item, index) in leftDataList"
          @click="handleChenkUserEmail(item.id), (isActive = index)"
          :class="['left-list-item', { active: isActive === index }]"
        >
          <img class="message-image" :src="item.iconUrl" alt="" />

          <div class="label">
            <div>{{ item.nickName }}</div>
            <div class="weidu" v-if="item.messageUnReadNum">
              {{ item.messageUnReadNum }}条未读信息
            </div>
            <!-- <div class="weidu" v-else>全部已读</div> -->
          </div>
        </div>
      </div>

      <el-button @click="handleSelectUser" class="left-button"
        >选择用户发送邮件</el-button
      >
    </div>
    <el-card class="right" v-loading="loading">
      <template v-if="rightDataList.length > 0">
        <div class="card-list">
          <el-card v-for="item in rightDataList" style="margin-bottom: 15px">
            <div class="message-list">
              <div class="message-list-label-1">
                {{ item.myselfMessage === 1 ? "我 :" : "ta :" }}
              </div>
              <div
                class="message-list-label-2"
                @click="handleLookEmail(item, item.myselfMessage)"
              >
                内容：<span v-if="item.content.length < 8">{{
                  item.content
                }}</span>
                <span v-else>{{ item.content.slice(0, 8) }}...</span>
              </div>
              <div class="message-list-label-3">
                <span v-show="item.myselfMessage === 0">
                  <!-- {{ item.consumeStatus === 0 ? "未读" : "已读" }} -->
                  <span v-if="item.consumeStatus === 0" style="color: #f56c6c"
                    >未读</span
                  >
                  <span v-else style="color: #67c23a">已读</span>
                </span>
                <el-button
                  v-show="item.myselfMessage === 1"
                  @click="handleRemove(item.id)"
                  >撤回</el-button
                >
              </div>
            </div>
          </el-card>
        </div>

        <div style="position: absolute; right: 20px; bottom: 20px">
          <el-button type="primary" @click="handleSendEmail">
            发邮件给该用户</el-button
          >
        </div>
        <div class="pagination">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30, 40]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </template>
      <div v-else class="right-tip">请点击左侧查看邮件信息</div>
    </el-card>
  </div>
  <SendDialog
    ref="sendDialogRef"
    @handleChenkUserEmail="handleChenkUserEmail"
  />
  <LookDialog ref="lookDialogRef" />
  <SelectDialog ref="selectDialogRef" @getUserList="getUserList" />
</template>

<script setup lang="ts">
import {
  getListSenderUserInfo,
  getListUserEmailInfoBySenderId,
  getMessageDetailInfo,
  updateMessageSendStatus,
} from "@/api/user";
import { onMounted, ref } from "vue";

//分页
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const handleSizeChange = () => {
  handleChenkUserEmail(sendToUserId.value);
};
const handleCurrentChange = () => {
  handleChenkUserEmail(sendToUserId.value);
};

//弹框
import LookDialog from "./look-dialog.vue";
import SendDialog from "./send-dialog.vue";
import SelectDialog from "./select-dialog.vue";
import { ElMessage } from "element-plus";
const sendDialogRef = ref();
const lookDialogRef = ref();
const selectDialogRef = ref();
const handleSendEmail = () => {
  sendDialogRef.value.showDialog(sendToUserId.value);
};
const handleLookEmail = async (data: any, myselfMessage: number | string) => {
  lookDialogRef.value.showDialog(data);
  if (myselfMessage === 1) {
    return;
  }
  await getMessageDetailInfo(data._id).then(async () => {
    await handleChenkUserEmail(sendToUserId.value);
    await getUserList();
  });
};
const handleSelectUser = () => {
  selectDialogRef.value.showDialog();
};
const handleRemove = async (id: number | string) => {
  await updateMessageSendStatus(id).then(async (res: any) => {
    await handleChenkUserEmail(sendToUserId.value);
    ElMessage({
      message: res.message,
      type: "success",
    });
  });
};

//页面数据
const sendToUserId = ref<string | number>("");
const leftDataList = ref<any>([]);
const rightDataList = ref<any>([]);
const isActive = ref<number>();
const loading = ref(false);
const handleChenkUserEmail = async (userId: string | number) => {
  if (userId) {
    sendToUserId.value = userId;
  }
  loading.value = true;
  await getListUserEmailInfoBySenderId(
    currentPage.value,
    pageSize.value,
    sendToUserId.value
  ).then((res: any) => {
    total.value = +res.total;
    rightDataList.value = res.data;
    loading.value = false;
  });
};

const getUserList = async () => {
  await getListSenderUserInfo().then((res: any) => {
    leftDataList.value = res.data;
  });
};
onMounted(() => {
  getUserList();
});
</script>

<style lang="less" scoped>
.send-email {
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
  justify-content: space-evenly;
  .left {
    width: 20%;
    height: 580px;
    // overflow-y: auto;
    position: relative;
    border: 1px rgb(193, 193, 193) solid;
    background-color: #fff;
    box-shadow: 1px 1px 1px 1px rgb(244, 244, 244);
    &-list {
      height: 540px;
      width: 100%;
      overflow: auto;
      &::-webkit-scrollbar {
        width: 0;
      }
      cursor: pointer;
    }
    .active {
      background-color: #eee;
      border: 1px red #ddd;
      font-weight: bold;
    }
    &-list-item {
      width: 100%;
      height: 60px;
      display: flex;
      align-items: center;
      // border: 1px blue solid;
      // margin-top: 2px;
      background-color: #fff;
      position: relative;
      &::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 1px;
        background-color: #ccc;
        bottom: 0;
      }
      .label {
        margin-left: 20px;
        height: 100%;
        line-height: 30px;
        .weidu {
          font-size: 14px;
          color: black;
          opacity: 0.8;
        }
      }
    }
    &-button {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 40px;
    }
    .message-image {
      width: 50px;
      height: 50px;
      border-radius: 50px;
      background-size: cover;
      background-repeat: no-repeat;
      margin-left: 10px;
    }
  }
  .right {
    width: 75%;
    height: 580px;
    overflow: auto;
    position: relative;
    &-tip {
      width: 100%;
      height: 540px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .message-list {
      width: 100%;
      display: flex;

      // justify-content: space-evenly;
      &-label-1 {
        width: 35%;
      }
      &-label-2 {
        width: 45%;
        cursor: pointer;
        text-align: left;
      }
      &-label-3 {
        width: 20%;
        text-align: center;
      }
    }
    .pagination {
      margin-top: 10px;
      position: absolute;
      bottom: 20px;
      left: 20px;
    }
    .card-list {
      height: 480px;
      overflow: auto;
      &::-webkit-scrollbar {
        width: 0;
      }
    }
  }
}
</style>
